<template>
<div>
  <div class="row">
    <label class="col-sm-2 control-label">所属部门</label>
    <div class="col-sm-4 control-label">
      <p>{{ this.$store.state.userDepart.department}}</p>
    </div>
    <label class="col-sm-2 control-label">时间</label>
    <div class="col-sm-4">
      <MyDatePicker :editable='false' v-bind:date='belongTime' ref="belongTime"></MyDatePicker>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 table-responsive">
      <table aria-describedby="example1_info" role="grid" id="example1" class="table table-striped table-bordered">
        <thead>
          <tr role="row">
            <th aria-label="指标名称" style="width: 167px;" colspan="1" rowspan="1" tabindex="0">指标名称</th>
            <th aria-label="代码" style="width: 60px;" colspan="1" rowspan="1" tabindex="0">代码</th>
            <th aria-label="本月实有" style="width: 60px;" colspan="1" rowspan="1" tabindex="0">本月实有</th>
            <th aria-label="上月实有" style="width: 60px;" colspan="1" rowspan="1" tabindex="0">上月实有</th>
            <th aria-label="指标名称" style="width: 167px;" colspan="1" rowspan="1" tabindex="0">指标名称</th>
            <th aria-label="代码" style="width: 60px;" colspan="1" rowspan="1" tabindex="0">代码</th>
            <th aria-label="本月实有" style="width: 60px;" colspan="1" rowspan="1" tabindex="0">本月实有</th>
            <th aria-label="上月实有" style="width: 60px;" colspan="1" rowspan="1" tabindex="0">上月实有</th>
            <th aria-label="指标名称" style="width: 167px;" colspan="1" rowspan="1" tabindex="0">指标名称</th>
            <th aria-label="代码" style="width: 60px;" colspan="1" rowspan="1" tabindex="0">代码</th>
            <th aria-label="本月实有" style="width: 60px;" colspan="1" rowspan="1" tabindex="0">本月实有</th>
            <th aria-label="上月实有" style="width: 60px;" colspan="1" rowspan="1" tabindex="0">上月实有</th>
          </tr>
        </thead>
        <tbody>
          <tr class="even" role="row">
            <td class="">一、从业人员月末人数</td>
            <td>01</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.people" ref="people" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.people" placeholder=""></el-input-number>
            </td>
            <td class="">工程技术</td>
            <td>17</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.engineering" ref="engineering" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.engineering" placeholder=""></el-input-number>
            </td>
            <td class="">三、从业人员变动情况</td>
            <td>32</td>
            <td>{{ thismonth.totalChanges}}</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class=""> 其中：女性</td>
            <td>02</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.females" ref="females" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.females" placeholder=""></el-input-number>
            </td>
            <td class="">广告营销</td>
            <td>18</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.adMarketing" ref="adMarketing" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.adMarketing" placeholder=""></el-input-number>
            </td>
            <td class="">（一）增加人数</td>
            <td>33</td>
            <td> {{thismonth.increaseWorkers}}</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class=""> （一）职工人数</td>
            <td>03</td>
            <td>{{thismonth.totalEmployees}}</td>
            <td>{{lastmonth.totalEmployees}}</td>
            <td class="">工勤</td>
            <td>19</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.worker" ref="worker" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.worker" placeholder=""></el-input-number>
            </td>
            <td class="">从社会招聘录用</td>
            <td>34</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.fromSocial" ref="fromSocial" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">事业编制固定制职工</td>
            <td>04</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.fixedEmployee" ref="fixedEmployee" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.fixedEmployee" placeholder=""></el-input-number>
            </td>
            <td class="">（二）其他从业人员</td>
            <td>20</td>
            <td>{{thismonth.otherWorkers}}</td>
            <td>{{lastmonth.otherWorkers}}</td>
            <td class="">转业、退伍军人</td>
            <td>35</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.fromTransfer" ref="fromTransfer" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">事业编制聘用制职工</td>
            <td>05</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.inviteEmployee" ref="inviteEmployee" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.inviteEmployee" placeholder=""></el-input-number>
            </td>
            <td class="">聘用的离退休人员</td>
            <td>21</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.retiedWorker" ref="retiedWorker" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.retiedWorker" placeholder=""></el-input-number>
            </td>
            <td class="">录用的大中专应届生</td>
            <td>36</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.student" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">集团企聘职工</td>
            <td>06</td>
            <td>
              <el-input-number size="mini" v-model="thismonth.groupEmployee" ref="groupEmployee" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.groupEmployee" placeholder=""></el-input-number>
            </td>
            <td class="">三方协议借用人员</td>
            <td>22</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.threePartWorker" ref="threePartWorker" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.threePartWorker" placeholder=""></el-input-number>
            </td>
            <td class="">从集团内部单位调入</td>
            <td>37</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.fromInternalOfCompany" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">直属单位聘用职工</td>
            <td>07</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.directEmployee" ref="directEmployee" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.directEmployee" placeholder=""></el-input-number>
            </td>
            <td class="">非全日制用工人员</td>
            <td>23</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.partTimeWorker" ref="partTimeWorker" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.partTimeWorker" placeholder=""></el-input-number>
            </td>
            <td class="">从集团外单位调入</td>
            <td>38</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.fromOutOfCompany" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">文化程度</td>
            <td>08</td>
            <td>{{thismonth.totaledus}}</td>
            <td>{{lastmonth.totaledus}}</td>
            <td class="">其他</td>
            <td>24</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.otherWorker" ref="otherWorker" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.otherWorker" placeholder=""></el-input-number>
            </td>
            <td class="">其他</td>
            <td>39</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.fromOther" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">研究生</td>
            <td>09</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.graduate" ref="graduate" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.graduate" placeholder=""></el-input-number>
            </td>
            <td class=""></td>
            <td></td>
            <td>
              <!--<el-input-number size="mini"  v-model="thismonth.otherWorker" placeholder=""></el-input-number>-->
            </td>
            <td>
              <!--<el-input-number size="mini"  v-model="lastmonth.otherWorker" placeholder=""></el-input-number>-->
            </td>
            <td class="">（二）减少人数</td>
            <td>40</td>
            <td>{{thismonth.decreaseWorkers}}</td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">大学本科</td>
            <td>10</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.undergraduate" ref="undergraduate" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.undergraduate" placeholder=""></el-input-number>
            </td>
            <td class="">二、保留劳动关系的职工</td>
            <td>25</td>
            <td>{{thismonth.totalkeeps}}</td>
            <td>{{lastmonth.totalkeeps}}</td>
            <td class="">退休</td>
            <td>41</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.retired" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">大专</td>
            <td>11</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.juniorCollege" ref="juniorCollege" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.juniorCollege" placeholder=""></el-input-number>
            </td>
            <td class="">离岗退养职工</td>
            <td>26</td>
            <td>
              <el-input-number size="mini" change :disabled='!editable' v-model="thismonth.keepRetired" ref="keepRetired" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.keepRetired" placeholder=""></el-input-number>
            </td>
            <td class=""> 解除、终止合同</td>
            <td>42</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.interrupt" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">中专及高中</td>
            <td>12</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.highSchool" ref="highSchool" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.highSchool" placeholder=""></el-input-number>
            </td>
            <td class="">长期病假职工</td>
            <td>27</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.keepIll" ref="keepIll" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.keepIll" placeholder=""></el-input-number>
            </td>
            <td class=""> 辞职、辞退</td>
            <td>43</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.resignation" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">初中及以下</td>
            <td>13</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.juniorMiddleSchool" ref="juniorMiddleSchool" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.juniorMiddleSchool" placeholder=""></el-input-number>
            </td>
            <td class="">脱产学习职工</td>
            <td>28</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.keepStudy" ref="keepStudy" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.keepStudy" placeholder=""></el-input-number>
            </td>
            <td class="">集团内部调动</td>
            <td>44</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.changed" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">工作岗位</td>
            <td>14</td>
            <td>{{thismonth.positions}}</td>
            <td>{{lastmonth.positions}}</td>
            <td class="">待岗职工</td>
            <td>29</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.keepChange" ref="keepChange" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.keepChange" placeholder=""></el-input-number>
            </td>
            <td class="">调离集团</td>
            <td>45</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.out" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class="">采编</td>
            <td>15</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.editing" ref="editing" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.editing" placeholder=""></el-input-number>
            </td>
            <td class="">借给集团外单位职工</td>
            <td>30</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.keepBorrow" ref="keepBorrow" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.keepBorrow" placeholder=""></el-input-number>
            </td>
            <td class="">开除</td>
            <td>46</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.fired" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr class="even" role="row">
            <td class=""> 行政管理</td>
            <td>16</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.administrativeManagement" ref="administrativeManagement" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.administrativeManagement" placeholder=""></el-input-number>
            </td>
            <td class="">其他</td>
            <td>31</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.keepOther" ref="keepOther" placeholder=""></el-input-number>
            </td>
            <td>
              <el-input-number size="mini" :disabled='true' v-model="lastmonth.keepOther" placeholder=""></el-input-number>
            </td>
            <td class="">其他</td>
            <td>47</td>
            <td>
              <el-input-number size="mini" :disabled='!editable' v-model="thismonth.toOther" placeholder=""></el-input-number>
            </td>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</template>

<script>
  import monthApi from "../../../common/monthapi";
  import Depart from "../../mycomponents/common/Depart";
  import MyDatePicker from "../../mycomponents/common/MyDatePicker";
  import Utils from "../../../common/utils";
  let util = new Utils();
  let api = new monthApi();
  export default {
    name: "hrinput",
    components: {
      Depart,
      MyDatePicker
    },
    props: ["hrData", "enable"],
    created: function() {
      if (this.hrData) {
        this.departmentId = this.hrData.departmentId;
        this.department = this.hrData.department;
        this.thismonth = this.hrData;
        this.editable = this.enable;
      }
    },
    data: function() {
      return {
        departmentId: "",
        departname: "",
        belongTime: api.getThisMonth(),
        editable: true,
        lastmonth: api.getDefaultVal(),
        thismonth: api.getDefaultVal()
      };
    },
    watch: {
      thismonth: {
        handler(curval, oldval) {
          this.showDiff(curval);
          this.sumtotal(this, true);
          console.log("val changed:" + curval);
        },
        deep: true
      }
    },
    methods: {
      getData(){
        return this.thismonth
      },
      editMonthReport() {
        this.editable = true;
      },
      showDiff(val) {
        for (var name in val) {
          if (val[name] != this.lastmonth[name]) {
            if (
              this.$refs[name] &&
              this.$refs[name].$refs &&
              this.$refs[name].$refs.input &&
              this.$refs[name].$refs.input.$refs &&
              this.$refs[name].$refs.input.$refs.input &&
              this.$refs[name].$refs.input.$refs.input.style
            ) {
              this.$refs[name].$refs.input.$refs.input.style["border-color"] =
                "red";
              this.$refs[name].$refs.input.$refs.input.style["color"] = "red";
            }
          } else {
            if (
              this.$refs[name] &&
              this.$refs[name].$refs &&
              this.$refs[name].$refs.input &&
              this.$refs[name].$refs.input.$refs &&
              this.$refs[name].$refs.input.$refs.input &&
              this.$refs[name].$refs.input.$refs.input.style
            ) {
              this.$refs[name].$refs.input.$refs.input.style["border-color"] =
                "#e4e7ed";
              this.$refs[name].$refs.input.$refs.input.style["color"] = "#c0c4cc";
            }
          }
        }
      },
      sumtotal(owner, bThis) {
        if (bThis) {
          var data = api.sum(owner.thismonth);
          owner.thismonth.positions = data.positions;
          owner.thismonth.totalChanges = data.totalChanges;
          owner.thismonth.increaseWorkers = data.increaseWorkers;
          owner.thismonth.totalEmployees = data.totalEmployees;
          owner.thismonth.otherWorkers = data.otherWorkers;
          owner.thismonth.totaledus = data.totaledus;
          owner.thismonth.decreaseWorkers = data.decreaseWorkers;
          owner.thismonth.totalkeeps = data.totalkeeps;
        } else {
          var data = api.sum(owner.lastmonth);
          owner.lastmonth.positions = data.positions;
          owner.lastmonth.totalChanges = data.totalChanges;
          owner.lastmonth.increaseWorkers = data.increaseWorkers;
          owner.lastmonth.totalEmployees = data.totalEmployees;
          owner.lastmonth.otherWorkers = data.otherWorkers;
          owner.lastmonth.totaledus = data.totaledus;
          owner.lastmonth.decreaseWorkers = data.decreaseWorkers;
          owner.lastmonth.totalkeeps = data.totalkeeps;
        }
      },
      getLastMonth(time) {
        console.log("time:" + time);
        var times = time.split("-");
        var year = Number.parseInt(times[0]);
        var month = Number.parseInt(times[1]);
        if (month == 1) {
          year = year - 1;
          month = 12;
        } else {
          month = month - 1;
        }
        if (month < 10) {
          month = "0" + month;
        }
        return year + "-" + month;
      },
      loaddata(belongTime, beThis) {
        console.log("time:" + belongTime);
        var that = this;
        api.get(belongTime,0, resp => {
          if (resp.body.body.stats.length > 0 && resp.body.body.stats[0]) {
            if (beThis) {
              that.thismonth = resp.body.body.stats[0];
              that.sumtotal(that, true);
              that.editable = false;
            } else {
              that.lastmonth = resp.body.body.stats[0];
              if (that.lastmonth && that.editable) {
                util.deepCopy(that.lastmonth, that.thismonth);
                that.thismonth.belongTime = that.belongTime;
              }
            }
          }
          that.sumtotal(that, true);
          that.sumtotal(that, false);
        });
      },
      saveMonthReport() {
        var that = this;
        this.thismonth.belongTime = that.belongTime;
        api.add(
          this.thismonth,
          resp => {
            util.showSucInfo(that, "人事月报上报成功!");
            that.editable = false;
          },
          resp => {
            console.log("failed:" + resp.data);
            util.showErrorInfo(that, "网络异常,请重试!");
          }
        );
      }
    }
  };
</script>

<style>
  .table>thead:first-child>tr:first-child>th {
    border-top: 1px solid #352f2f;
  }
  .table-bordered>tbody>tr>td,
  .table-bordered>tfoot>tr>td {
    border: 1px solid #352f2f;
  }
  .table-bordered>thead>tr>th,
  .table-bordered>tbody>tr>th,
  .table-bordered>tfoot>tr>th,
  .table-bordered>thead>tr>td,
  .table-bordered>tbody>tr>td,
  .table-bordered>tfoot>tr>td {
    border: 1px solid #352f2f;
  }
  .row {
    padding: 10px 10px;
  }
  .control-label {
    padding-top: 10px;
  }
  .red {
    border-color: "red";
    color: "red";
  }
</style>
